<template>
  <Dialog
    :model-value="dialogVisible"
    :title="dialogProps.title"
    :fullscreen="dialogProps.fullscreen"
    :max-height="dialogProps.maxHeight"
    :cancel-dialog="cancelDialog"
    width="70%"
  >
    <div :style="'width: calc(100% - ' + dialogProps.labelWidth! / 2 + 'px)'">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="日志编号">{{ dialogProps.row?.id }}</el-descriptions-item>
        <el-descriptions-item label="操作模块">{{ dialogProps.row?.title }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{ dialogProps.row?.businessTypeName }}</el-descriptions-item>
        <el-descriptions-item label="操作人员">{{ dialogProps.row?.operName }}</el-descriptions-item>
        <el-descriptions-item label="操作IP">{{ dialogProps.row?.operIp }}</el-descriptions-item>
        <el-descriptions-item label="操作地址">{{ dialogProps.row?.operUrl }}</el-descriptions-item>
        <el-descriptions-item label="操作方法" :span="2">
          <el-text type="info">{{ dialogProps.row?.method }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item label="请求方式">{{ dialogProps.row?.requestMethod }}</el-descriptions-item>
        <el-descriptions-item label="操作状态">
          <el-tag :type="dialogProps.row?.status === 0 ? 'success' : 'danger'">
            {{ dialogProps.row?.statusName }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">
          {{ formatTime(dialogProps.row?.operTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="耗时">{{ dialogProps.row?.costTime }} ms</el-descriptions-item>
        <el-descriptions-item label="请求参数" :span="2">
          <div class="json-container">
            <pre>{{ formatJson(dialogProps.row?.operParam) }}</pre>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="返回结果" :span="2">
          <div class="json-container">
            <pre>{{ formatJson(dialogProps.row?.jsonResult) }}</pre>
          </div>
        </el-descriptions-item>
        <el-descriptions-item v-if="dialogProps.row?.errorMsg" label="错误信息" :span="2">
          <el-alert :title="dialogProps.row.errorMsg" type="error" :closable="false" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <slot name="footer">
        <el-button @click="cancelDialog">关闭</el-button>
      </slot>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dialog } from '@/components/Dialog'

interface DialogProps {
  title: string
  isView: boolean
  fullscreen?: boolean
  row: any
  labelWidth?: number
  maxHeight?: number | string
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  isView: false,
  title: '',
  row: {},
  labelWidth: 120,
  fullscreen: false,
  maxHeight: '600px'
})

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps): void => {
  params.row = { ...dialogProps.value.row, ...params.row }
  dialogProps.value = { ...dialogProps.value, ...params }
  dialogVisible.value = true
}

defineExpose({
  acceptParams
})

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return ''
  return new Date(time).toLocaleString('zh-CN')
}

// 格式化JSON
const formatJson = (json: string) => {
  if (!json) return '无'
  try {
    const parsed = JSON.parse(json)
    return JSON.stringify(parsed, null, 2)
  } catch {
    return json
  }
}

const cancelDialog = () => {
  dialogVisible.value = false
  dialogProps.value.row = {}
}
</script>

<style scoped>
.json-container {
  max-height: 200px;
  padding: 10px;
  overflow: auto;
  background: #f5f7fa;
  border-radius: 4px;
}

.json-container pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
}
</style>
